<template>
	<view class="telLogin">
		<template v-if="!loading">
			<view class="telLogin_title">{{ hasBindPassword ? '修改登录密码' : '设置登录密码' }}</view>
			<view class="form">
				<view class="form_li" v-if="hasBindPassword">
					<view class="form_li_label">原密码</view>
					<view class="form_li_value">
						<input type="password" v-model="oldPassword" placeholder="请输入原密码">
					</view>
				</view>
				<view class="form_li">
					<view class="form_li_label">新密码</view>
					<view class="form_li_value">
						<input type="password" v-model="newPassword" placeholder="请输入新密码">
					</view>
				</view>
				<view class="form_li">
					<view class="form_li_label">确认新密码</view>
					<view class="form_li_value">
						<input type="password" v-model="confirmPassword" placeholder="请输入确认新密码">
					</view>
				</view>
			</view>
			<view class="tip">
				区分大小写，须同时包括数字和字母
			</view>
			<view class="tip">
				密码长度需8-16位
			</view>
			<view class="telLogin_btn">
				<button type="primary" class="telLogin_btn_submit" v-on:click="handlePassword"
					:disabled="btnLoginMark">确定</button>
			</view>
		</template>
		<uniLoading v-else></uniLoading>
	</view>
</template>
<script>
	import uniLoading from '../../components/uni-loading/uni-loading'

	export default {
		components: {
			uniLoading
		},
		data() {
			return {
				loading: false,
				//登录按钮标记
				btnLoginMark: true,
				hasBindPassword: false,
				oldPassword: "",
				newPassword: "",
				confirmPassword: "",
			}
		},
		watch: {
			confirmPassword(val) {
				if (val.length > 0) {
					this.btnLoginMark = false
				} else {
					this.btnLoginMark = true
				}
			}
		},
		methods: {
			async afterLoad(e) {
				this.checkBindPassword()
			},

			/**
			 * 更新/修改密码
			 */
			handlePassword() {
				let self = this
				let param = {}
				if (self.hasBindPassword) {
					if (!self.oldPassword) {
						uni.showToast({ title: "请输入原密码", icon: "none" })
						return
					}
					param.oldPassword = self.oldPassword
				}
				if (!self.newPassword) {
					uni.showToast({ title: "请输入新密码", icon: "none" })
					return
				}
				if (!self.confirmPassword) {
					uni.showToast({ title: "请输入确认密码", icon: "none" })
					return
				}
				if (self.newPassword !== self.confirmPassword) {
					uni.showToast({ title: "两次密码输入不一致", icon: "none" })
					return
				}
				param.newPassword = self.newPassword

				self.$api.bindUserPassword(param).then(res => {
					if (res.res) {
						let title = self.hasBindPassword ? "密码修改成功" : "密码设置成功"
						uni.showToast({
							title: title,
							icon: "none"
						})
            self.navigateBackAndLoad()
					}
				})
			},

			/**
			 * 判断用户是否设置过密码
			 */
			checkBindPassword() {
				let self = this
				self.loading = true
				self.$api.checkBindPassword({}).then(res => {
					if (res.res) {
						this.hasBindPassword = res.hasBindPassword
						if (!res.hasBindPassword) {
							uni.setNavigationBarTitle({
								title: '设置密码'
							})
						}
					}
					self.loading = false
				}).catch(e => {
				    self.loading = false
				})
			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	@import "../../static/css/form.scss";

	.telLogin {
		.telLogin_top {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 50px;
			background-color: #00aaff;
			font-size: 20px;
		}

		.telLogin_image {
			padding-left: 20px;
			padding-top: 100px;

			image {
				width: 140px;
			}
		}

		.telLogin_title {
			margin-top: 20px;
			padding: 10px 20px 40px 20px;
			font-size: 22px;
			font-weight: bold;
		}

		.tip {
			margin: auto;
			color: #a7a7a7;
			font-size: 12px;
			margin-top: 10px;
			width: calc(100% - 40px);
		}

		.telLogin_content {
			display: flex;
			align-items: center;
			margin: 0px 20px 30px 20px;
			padding-bottom: 10px;
			border-bottom: 1px solid #f6f6f6;
			height: 30px;
			font-size: 15px;

			.telLogin_content_addressTel {
				display: flex;
				align-items: end;
				justify-content: center;
				margin-right: 10px;
			}

			.telLogin_content_box {
				flex: 1;
				margin-right: 20px;

				&.password {
					margin-right: 10px;

					.telLogin_content_box_input {
						width: 100%;
						font-size: 15px !important;
					}
				}

				.telLogin_content_box_input {
					width: calc(100% - 40px);
					font-size: 15px !important;
				}
			}

			.telLogin_content_delete {
				width: 20px;

				.telLogin_content_delete_btn {
					color: #e5e5e5;
					background-color: #ffffff !important;

				}
			}

			.telLogin_content_getCode {
				width: 95px;
				margin-left: 10px;

				&.password {
					width: 20px;
				}

				.telLogin_content_getCode_btn {
					color: #00aaff !important;
					font-size: 13px !important;
					background-color: #ffffff;
				}
			}
		}

		.telLogin_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20px;
			margin-top: 40px;

			.telLogin_btn_submit {
				width: calc(100% - 40px);
				border-radius: 5px !important;
			}
		}

		.telLogin_type {
			width: 100%;
			padding: 0 20px;

			.telLogin_type_font {
				color: #00aaff;
				font-size: 14px;
			}
		}

		.telLogin_foot {
			position: fixed;
			bottom: 50px;
			width: 100%;

			.telLogin_foot_article {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				margin-bottom: 5px;

				.telLogin_foot_article_text {
					margin-right: 5px;
				}

				.telLogin_foot_article_book {
					color: #00aaff;

				}
			}

			.telLogin_foot_content {
				font-size: 12px;

				.telLogin_foot_content_text {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 5px;
					margin-bottom: 5px;
				}
			}
		}
	}
</style>
